import { FC, useEffect } from "react";
import {
  OptionsType,
  QuestionCheckboxDefaultProps,
  QuestionCheckboxPropsType,
} from "./interface";
import { Button, Checkbox, Form, Input, Space } from "antd";
import { MinusCircleOutlined, PlusCircleOutlined } from "@ant-design/icons";
import { nanoid } from "nanoid";

const PropComponent: FC<QuestionCheckboxPropsType> = (
  props: QuestionCheckboxPropsType
) => {
  const { options, isVetical, title, onChange, disabeled } = {
    ...QuestionCheckboxDefaultProps,
    ...props,
  };
  const [form] = Form.useForm();

  useEffect(() => {
    form.setFieldsValue({ options, isVetical, title });
  }, [options, isVetical, title, form]);

  function handleValuesChange() {
    const newVal = form.getFieldsValue();
    newVal.options.filter((item: OptionsType) => item.text !== null);
    console.log(newVal, "newVal");
    onChange?.(newVal);
  }

  return (
    <Form
      layout="vertical"
      initialValues={{
        options,
        isVetical,
        title,
      }}
      form={form}
      disabled={disabeled}
      onValuesChange={handleValuesChange}
    >
      <Form.Item
        label="标题"
        name="title"
        rules={[{ required: true, message: "请输入标题" }]}
      >
        <Input></Input>
      </Form.Item>
      <Form.Item label="选项">
        <Form.List name="options">
          {(fields, { add, remove }) => {
            return (
              <>
                {fields.map((field, index) => (
                  <Space key={field.key} align="baseline">
                    <Form.Item
                      label=""
                      name={[index, "checked"]}
                      valuePropName="checked"
                    >
                      <Checkbox></Checkbox>
                    </Form.Item>
                    <Form.Item
                      label=""
                      name={[index, "text"]}
                      rules={[
                        { required: true, message: "请输入选项名字" },
                        {
                          validator: (_, text) => {
                            const { options } =
                              form.getFieldsValue() as QuestionCheckboxPropsType;

                            let num = 0;
                            options?.forEach((item: OptionsType) => {
                              if (item.text === text) num++;
                            });
                            if (num === 1) return Promise.resolve();
                            return Promise.reject(
                              new Error("不能有相同的字段名")
                            );
                          },
                        },
                      ]}
                    >
                      <Input></Input>
                    </Form.Item>
                    {fields.length > 2 ? (
                      <MinusCircleOutlined onClick={() => remove(field.name)} />
                    ) : null}
                  </Space>
                ))}

                <div>
                  <Button
                    type="link"
                    block
                    onClick={() =>
                      add({ text: null, value: nanoid(5), checked: false })
                    }
                    icon={<PlusCircleOutlined />}
                  >
                    添加选项
                  </Button>
                </div>
              </>
            );
          }}
        </Form.List>
      </Form.Item>

      <Form.Item label="是否垂直" name="isVetical" valuePropName="checked">
        <Checkbox></Checkbox>
      </Form.Item>
    </Form>
  );
};

export default PropComponent;
